<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在加载, 请稍候...">
    <!-- 案件基本信息 -->
    <div class="mb-6 p-4 bg-white rounded-lg shadow-sm">
      <div class="text-xl font-bold mb-4">案件基本信息</div>
      <a-descriptions :data="caseBaseInfoData" bordered layout="vertical" size="large" />
    </div>
    
    <!-- 涉案物品清单（多条记录） -->
    <div class="mb-6 p-4 bg-white rounded-lg shadow-sm">
      <div class="text-xl font-bold mb-4">涉案物品清单</div>
      <a-table :columns="itemColumns" :data="caseData.items" :pagination="false" bordered stripe :scroll="{ x: '100%' }">
        <template #images="{ record }">
          <div class="flex flex-wrap gap-2">
            <template v-if="record.images && record.images.length > 0">
              <a-image-preview-group infinite>
                <a-image 
                  v-for="(image, index) in record.images" 
                  :key="image.uid" 
                  :src="image.url" 
                  :width="80" 
                  class="rounded border border-gray-200"
                />
              </a-image-preview-group>
            </template>
            <template v-else>
              <span class="text-gray-400">无图片</span>
            </template>
          </div>
        </template>
      </a-table>
    </div>
    
    <a-divider />
    
    <!-- 监察记录（多条记录） -->
    <div class="mb-6 p-4 bg-white rounded-lg shadow-sm">
      <div class="text-xl font-bold mb-4">监察记录</div>
      <a-table :columns="supervisionColumns" :data="caseData.supervisions" :pagination="false" bordered stripe :scroll="{ x: '100%' }" />
    </div>
    
    <a-divider />
    
    <!-- 人员进出仓库登记簿 -->
    <div class="mb-6 p-4 bg-white rounded-lg shadow-sm">
      <div class="text-xl font-bold mb-4">人员进出仓库登记簿</div>
      <a-table :columns="personnelRegisterColumns" :data="caseData.personnelRegisters" :pagination="false" bordered stripe :scroll="{ x: '100%' }">
        <template #personnel="{ record }">
          {{ record.personnel }}
        </template>
        <template #reason="{ record }">
          {{ record.reason }}
        </template>
        <template #inboundTime="{ record }">
          {{ record.inboundTime }}
        </template>
        <template #outboundTime="{ record }">
          {{ record.outboundTime }}
        </template>
        <template #remarks="{ record }">
          {{ record.remarks }}
        </template>
      </a-table>
    </div>

    <a-divider class="mt-0"/>

    <div class="mt-6 p-4 bg-white rounded-lg shadow-sm">
      <div class="flex justify-end">
        <a-space>
          <a-button @click="cancelBtnClick()">返回</a-button>
          <a-button type="primary" @click="editBtnClick()">编辑</a-button>
        </a-space>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import { getCurrentInstance, ref, computed } from 'vue';

// 全局实例
const { proxy } = getCurrentInstance();

// 接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
});

// 父组件函数
const emits = defineEmits(['ok', 'cancel']);

// 加载中...
const spinLoading = ref(false);

// 模拟数据 - 实际应用中应该通过API获取
const caseData = ref({
  id: props.params.id,
  // 案件基本信息
  caseName: '某违法建筑案',
  caseNature: '违法建筑',
  filingTime: '2022-12-25',
  forceMeasureStartTime: '2023-01-01',
  forceMeasureEndTime: '2023-02-01',
  forceMeasureStage: '调查取证',
  party: '张某某',
  caseHandler: '张三、李四',
  unit: '晋江市市场监督管理局',
  serialNo: 'BH-2023-001',
  
  // 涉案物品清单（多条记录）
  items: [
    {
      id: 1,
      itemName: '建筑材料',
      brand: 'XX品牌',
      model: 'A型号',
      totalQuantity: 100,
      newQuantity: 80,
      usedQuantity: 20,
      inboundTime: '2023-01-01 10:00:00',
      forceMeasureDocNo: 'XZQZ-2023-001',
      outboundTime: '2023-02-01 14:00:00',
      punishmentDocNo: 'XZCF-2023-001',
      caseHandler1: '张三',
      caseHandler2: '李四',
      warehouseKeeper: '王五',
      images: [
        {
          uid: '1',
          name: '建筑材料图片1.jpg',
          url: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
        },
        {
          uid: '2',
          name: '建筑材料图片2.jpg',
          url: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp'
        }
      ]
    },
    {
      id: 2,
      itemName: '电动工具',
      brand: 'YY品牌',
      model: 'B型号',
      totalQuantity: 50,
      newQuantity: 30,
      usedQuantity: 20,
      inboundTime: '2023-01-02 11:00:00',
      forceMeasureDocNo: 'XZQZ-2023-002',
      outboundTime: null,
      punishmentDocNo: '',
      caseHandler1: '张三',
      caseHandler2: '李四',
      warehouseKeeper: '王五',
      images: [
        {
          uid: '3',
          name: '电动工具图片.jpg',
          url: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'
        }
      ]
    }
  ],
  
  // 监察记录（多条记录）
  supervisions: [
    {
      id: 1,
      supervisionTime: '2023-01-15 09:00:00',
      supervisionLocation: '仓库',
      supervisionReason: '例行检查',
      documentBasis: 'WS-2023-001',
      operator: '赵六',
      warehouseKeeper: '王五',
      supervisor: '钱七'
    },
    {
      id: 2,
      supervisionTime: '2023-01-25 14:00:00',
      supervisionLocation: '仓库',
      supervisionReason: '定期检查',
      documentBasis: 'WS-2023-002',
      operator: '赵六',
      warehouseKeeper: '王五',
      supervisor: '钱七'
    }
  ],
  
  // 人员进出仓库登记簿（多条记录）
  personnelRegisters: [
    {
      id: 1,
      personnel: '张三、李四',
      reason: '取证检查',
      inboundTime: '2023-01-15 09:00:00',
      outboundTime: '2023-01-15 11:00:00',
      remarks: '正常检查'
    },
    {
      id: 2,
      personnel: '王五',
      reason: '物品清点',
      inboundTime: '2023-01-20 14:30:00',
      outboundTime: '2023-01-20 16:45:00',
      remarks: '例行清点'
    },
    {
      id: 3,
      personnel: '赵六、钱七',
      reason: '监察检查',
      inboundTime: '2023-01-25 10:15:00',
      outboundTime: '2023-01-25 11:30:00',
      remarks: '定期监察'
    },
    {
      id: 4,
      personnel: '李四、周八',
      reason: '物品出库',
      inboundTime: '2023-02-01 09:00:00',
      outboundTime: '2023-02-01 10:30:00',
      remarks: '执行处罚决定'
    }
  ]
});

// 案件基本信息描述数据
const caseBaseInfoData = computed(() => [
  {
    label: '案件名称',
    value: caseData.value.caseName
  },
  {
    label: '涉案性质',
    value: caseData.value.caseNature
  },
  {
    label: '立案时间',
    value: caseData.value.filingTime
  },
  {
    label: '行政强制措施开始时间',
    value: caseData.value.forceMeasureStartTime
  },
  {
    label: '行政强制措施结束时间',
    value: caseData.value.forceMeasureEndTime || '-'
  },
  {
    label: '行政强制措施',
    value: caseData.value.forceMeasureStage
  },
  {
    label: '当事人',
    value: caseData.value.party
  },
  {
    label: '案件经办人员',
    value: caseData.value.caseHandler
  },
  {
    label: '单位',
    value: caseData.value.unit
  },
  {
    label: '编号',
    value: caseData.value.serialNo
  }
]);

// 涉案物品清单表格列定义
const itemColumns = [
  {
    title: '物品名称',
    dataIndex: 'itemName',
    width: 180,
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    width: 150,
  },
  {
    title: '规格型号',
    dataIndex: 'model',
    width: 150,
  },
  {
    title: '总数量',
    dataIndex: 'totalQuantity',
    width: 120,
  },
  {
    title: '新品数量',
    dataIndex: 'newQuantity',
    width: 120,
  },
  {
    title: '旧品数量',
    dataIndex: 'usedQuantity',
    width: 120,
  },
  {
    title: '入库时间',
    dataIndex: 'inboundTime',
    width: 180,
  },
  {
    title: '出库时间',
    dataIndex: 'outboundTime',
    width: 180,
    render: ({ record }) => record.outboundTime || '-'
  },
  {
    title: '强制措施文号',
    dataIndex: 'forceMeasureDocNo',
    width: 180,
  },
  {
    title: '处罚决定书文号',
    dataIndex: 'punishmentDocNo',
    width: 180,
    render: ({ record }) => record.punishmentDocNo || '-'
  },
  {
    title: '办案人员',
    dataIndex: 'caseHandler1',
    width: 180,
    render: ({ record }) => `${record.caseHandler1}、${record.caseHandler2}`
  },
  {
    title: '仓管员',
    dataIndex: 'warehouseKeeper',
    width: 150,
  },
  {
    title: '物品图片',
    slotName: 'images',
    width: 150,
  }
];

// 监察记录表格列定义
const supervisionColumns = [
  {
    title: '监察时间',
    dataIndex: 'supervisionTime',
    width: 150,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '地点',
    dataIndex: 'supervisionLocation',
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '监察事由',
    dataIndex: 'supervisionReason',
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '文书依据',
    dataIndex: 'documentBasis',
    width: 120,
    ellipsis: true,
    tooltip: true,
    render: ({ record }) => record.documentBasis || '-'
  },
  {
    title: '经办人',
    dataIndex: 'operator',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '仓管员',
    dataIndex: 'warehouseKeeper',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '监察员',
    dataIndex: 'supervisor',
    width: 100,
    ellipsis: true,
    tooltip: true,
  }
];

// 人员进出仓库登记簿描述数据 - 不再使用，改为表格展示多条记录
// const personnelRegisterData = computed(() => []);


// 加载数据
const loadData = () => {
  spinLoading.value = true;
  // 模拟API请求延迟
  setTimeout(() => {
    // 实际应用中这里应该是API请求获取数据
    spinLoading.value = false;
  }, 500);
};

// 取消按钮点击
const cancelBtnClick = () => {
  emits('cancel');
};

// 编辑按钮点击
const editBtnClick = () => {
  emits('ok', { operationType: 'update', id: props.params.id });
};

// 初始化
loadData();
// 在script setup部分添加
const personnelRegisterColumns = [
  {
    title: '出入人员',
    slotName: 'personnel',
    width: 150,
    align: 'center'
  },
  {
    title: '出入事由',
    slotName: 'reason',
    width: 200,
    align: 'center'
  },
  {
    title: '入库时间',
    slotName: 'inboundTime',
    width: 220,
    align: 'center'
  },
  {
    title: '出库时间',
    slotName: 'outboundTime',
    width: 220,
    align: 'center'
  },
  {
    title: '备注',
    slotName: 'remarks',
    width: 250,
    align: 'center'
  }
];
</script>